<template>
  <div class="viewStatistics">
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      width="100%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :fullscreen ="true"
    > -->
    <basic-container>
        <avue-crud :option="option"
          :table-loading="loading"
          :data="data"
          :page="page"
          ref="crud"
          v-model="form"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @on-load="onLoad"
        >
        <template slot="menuLeft">
          <div style="width: 100%; text-align: center;line-height: 30px;font-size: 12px;color: red;margin-left: 12px;">实收&nbsp;{{ isAnswer }}&nbsp;份&nbsp;/&nbsp;应收&nbsp;{{ sumTotal }}&nbsp;份&nbsp;&nbsp;&nbsp;&nbsp;平均用时：{{ averageTime }}</div>
        </template>
        <template slot="resultScoreSearch">
          <el-form v-model="scoreForm">
            <el-row>
              <el-form-item>
                <el-col :span="12">
                  <el-input size="small" clearable @clear="handleClear('min')" v-model="scoreForm.scoreMin" placeholder="最小分数"></el-input>
                </el-col>
                <el-col :span="12">
                  <el-input size="small" clearable @clear="handleClear('max')" v-model="scoreForm.scoreMax" placeholder="最大分数"></el-input>
                </el-col>
              </el-form-item>
            </el-row>
          </el-form>
        </template>
        </avue-crud>
      </basic-container>
      <!-- <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="handleClose">取 消</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import { getTongjList, getTongjNum } from '@/api/platform/viewStatistics.js'
import { grade } from "@/api/service/xs";
import { getSchoolTree } from "@/api/platform/psychologyQuestionnaire";

export default {
  props: {
    dialogVisible: {
        type: Boolean,
        default: false
    },
    rowId: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      form: {},
      loading: false,
      selectionList: [],
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        searchShow: true,
        searchMenuSpan: 6,
        tree: false,
        tip: false,
        border: true,
        index: true,
        selection: true,
        addBtn: false,
        menuWidth: 300,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        menu: false,
        column: [
          {
            label: "学校",
            prop: "schoolId",
            search: true,
            type: 'tree',
            dicData: [],
            rules: [
              {
                required: true,
                message: "请选择学校",
                trigger: "blur"
              }
            ],
            props: {
              label: "xxName",
              value: "id"
            },
            cascader: ['jdId'],
            change: ({value}) => {
              this.schoolTypeChange(value);
            }
          },
          {
            label: "所属阶段",
            prop: "jdId",
            type: "select",
            search: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择所属阶段",
              trigger: "blur"
            }],
            hide: true,
            dicUrl: "/api/ManageStudent/GetSchoolStageSelect",
            cascader: ['njId'],
            props: {
              label: "title",
              value: "id"
            },
            change: ({value}) => {
              this.jdIdTypeChange(value);
            }
          },
          {
            label: "年级",
            prop: "njId",
            type: "select",
            search: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请输入年级名称",
              trigger: "blur"
            }],
            props: {
              label: "title",
              value: "id"
            },
            cascader: ['bjId'],
            dicData: [],
            formatter: (row) =>{
              return row.njName
            }
          },
          {
            label: "班级",
            prop: "bjId",
            search: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请输入班级",
              trigger: "blur"
            }],
            type: "select",
            dicUrl: "/api/ManageStudent/GetClassSelect?njId={{key}}",
            props: {
              label: "bjName",
              value: "id"
            },
            formatter: (row) =>{
              return row.bjName
            }
          },
          {
            label: "姓名",
            prop: "xsName",
          },
          {
            label: "得分",
            prop: "resultScore",
            search: true,
            dicData: [],
            rules: [
              {
                required: true,
                message: "请选择得分",
                trigger: "blur"
              }
            ],
          },
          {
            label: "答卷时间",
            prop: "resultTime",
          },
          {
            label: "用时",
            prop: "minute",
          },
          {
            label: "答题是否有效",
            prop: "isEffect",
            formatter: (row, col, val) => {
              return val ? '是' : '否'
            }
          }
        ]
      },
      data: [],
      sumTotal: 0,
      isAnswer: 0,
      isNotAnswer: 0,
      averageTime: '',
      schoolList: [],
      schoolId: '',
      scoreForm: {
        scoreMin: '',
        scoreMax: '',
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.onLoad(this.page)
      }
      // else {
      //   this.searchReset()
      // }
    }
  },
  mounted() {
    this.onLoad(this.page)
  },
  methods: {
    handleClear(val) {
      if (val == 'min') {
        this.scoreForm.scoreMin = ''
      } else {
        this.scoreForm.scoreMax = ''
      }
    },
    getTree() {
      getSchoolTree().then(res => {
        const column = this.findObject(this.option.column, "schoolId");
        column.dicData = res.data.data;
      })
    },
    schoolTypeChange(v) {
      this.schoolId = v
      // 年级
      // const school = this.findObject(this.option.column, "njId");
      // school.dicData = [];
    },
    // 切换所属阶段
    jdIdTypeChange(v) {
      if (this.schoolId !== "" && this.schoolId !== null && this.schoolId !== undefined) {
        let params = {
          schoolId: this.schoolId,
          jdId: v
        }
        grade(params).then(res => {
          const gradeData = this.findObject(this.option.column, "njId");
          gradeData.dicData = res.data.data
        });
      }
    },
    searchReset() {
      this.query = {};
      this.scoreForm = {
        scoreMin: '',
        scoreMax: ''
      }
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      const rowId = this.$route.query.id
      getTongjList({
        current: page.currentPage,
        size: page.pageSize,
        id: rowId,
        scoreMin: this.scoreForm.scoreMin || 0,
        scoreMax: this.scoreForm.scoreMax || 0,
        ...Object.assign(params, this.query)
      }).then(res => {
        this.loading = false;
        this.page.total = res.data.data.total;
        this.data = res.data.data.records;
      }).then(() => {
        this.getTree()
      })
      getTongjNum({
        current: page.currentPage,
        size: page.pageSize,
        id: rowId,
        scoreMin: this.scoreForm.scoreMin || 0,
        scoreMax: this.scoreForm.scoreMax || 0,
        ...Object.assign(params, this.query)
       }).then(res => {
        const d = res.data.data
        this.sumTotal = d.sumTotal
        this.isAnswer = d.isAnswer
        this.isNotAnswer = d.isNotAnswer
        this.averageTime = d.averageTime
      })
    },
    handleClose() {
      this.$emit('close', false)
    },
  }
}
</script>
